<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div><i class="el-icon-user-solid" />北京地区交警用户总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ total }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #f56c6c">
          <div><i class="el-icon-money" />人数最多的岗位人数:{{ maxage }}</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ maxage_users }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67c23a">
          <div>
            <i class="el-icon-bank-card" />人数最少的岗位人数:{{ minage }}
          </div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ minage_users }}
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :span="6">
        <el-card style="color: #409eff">
          <div style="color: #409eff"><i class="el-icon-s-shop" />案件总数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            189
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 1400px; height: 500px"></div>
      </el-col>
      <!-- <el-col :span="12">
        <div id="pie" style="width: 500px; height: 400px"></div>
      </el-col> -->
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { Job } from "@/api/api";
export default {
  name: "Home",
  data() {
    return {
      total: 0, // 初始值
      maxage: 0,
      minage: 100,
    };
  },
  async mounted() {
    //使用mounted的目的是为了等页面元素渲染之后再触发
    var myChart = echarts.init(document.getElementById("main"), null, {
      useDirtyRect: true,
    });
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      dataset: [
        {
          // dimensions: ["name", "age", "profession", "score", "date"],
          dimensions: ["name", "score"],
          source: [
            ["Hannah Krause", 314],
            // ["Zhao Qian", 20, "Teacher", 351, "2011-03-01"],
            // ["Jasmin Krause ", 52, "Musician", 287, "2011-02-14"],
            // ["Li Lei", 37, "Teacher", 219, "2011-02-18"],
            // ["Karle Neumann", 25, "Engineer", 253, "2011-04-02"],
            // ["Adrian Groß", 19, "Teacher", "-", "2011-01-16"],
            // ["Mia Neumann", 71, "Engineer", 165, "2011-03-19"],
            // ["Böhm Fuchs", 36, "Musician", 318, "2011-02-24"],
            // ["Han Meimei", 67, "Engineer", 366, "2011-03-12"],
          ],
        },
        {
          transform: {
            type: "sort",
            config: { dimension: "name", order: "desc" },
          },
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: { interval: 0, rotate: 30 },
      },
      yAxis: {},
      series: {
        type: "bar",
        encode: { x: "name", y: "score" },
        datasetIndex: 1,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    };

    // option = {
    //   tooltip: {
    //     trigger: "axis",
    //     axisPointer: {
    //       type: "cross",
    //     },
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    //     },
    //   ],
    //   yAxis: {
    //     type: "value",
    //   },
    //   series: [
    //     {
    //       data: [120, 200, 150, 80, 70, 110, 130],
    //       type: "bar",
    //       showBackground: true,
    //       backgroundStyle: {
    //         color: "rgba(180, 180, 180, 0.2)",
    //       },
    //     },
    //   ],
    // };
    const res = await Job();
    const newData = [];
    for (let i = 0; i < res.data.length; i++) {
      newData[i] = [res.data[i].district, res.data[i].users];
      // option.dataset[0].source[i] = res.data[i].district;
      // option.dataset[0].source[i] = res.data[i].users;
      console.log(res.data[i].district + "," + res.data[i].users);
      if (res.data[i].users >= this.maxage) {
        this.maxage_users = res.data[i].district;
        this.maxage = res.data[i].users;
      }
      if (res.data[i].users <= this.minage) {
        this.minage_users = res.data[i].district;
        this.minage = res.data[i].users;
      }
      this.total = this.total + res.data[i].users;
    }
    option.series.data = newData; // 重新对要显示的数据进行赋值
    option && myChart.setOption(option);
  },
};
</script>
<style scoped>
/* 在 Vue.js 中，<style scoped> 是一个特殊的语法，用于限制样式的作用范围，确保样式仅对当前组件生效，而不会影响到其他组件或全局样式。 */
/* 当你在 Vue 组件中使用 <style scoped> 时，Vue 会自动为该组件的 HTML 元素添加一个唯一的属性（如 data-v-f3f3eg9），并在 CSS 选择器中添加这个属性，以确保样式只应用到该组件的根元素及其子元素上。 */
</style>
